<template>
    <div>
        <div class ="heard_image">
            <img src="../../assets/headimg.jpg"/>
        </div>
        <div class="hotel">
            <div class = "hotel_top">                
                    <div class="hotel_top_left">
                        <p class="hotel_top_left_text" @click="tab1">全日房</p>
                        <div class="hotel_top_bottom"/>
                    </div>                
                    <div class="hotel_top_right">
                        <p class="hotel_top_right_text" @click="tab2">钟点房</p>
                        <div class="hotel_top_bottom"/>
                    </div>
            </div>
            <div class="hotel_site">
                <div class="hotel_site_left">
                    <P>目的地</P>
                </div>
                <div class="hotel_site_city">
                    <a href="Position"><p>成都</p></a>
                  
                </div>
                <div class="hotel_site_right">
                    <img src="../../assets/jiantou.png"/>
                </div>
            </div>
            <div class="hotel_time">
                <div class="hotel_time_left">
                    <p>时间</p>
                </div>
                <div class="hotel_time_content" @click="tab3">
                    <div class="hotel_time_content_top">
                        <span class="hotel_time_content_top_left">06月17日</span>
                         <span class="hotel_time_content_top_right">周一入住</span>
                    </div>
                     <div class="hotel_time_content_bottom">
                        <span class="hotel_time_content_bottom_left">06月17日</span>
                         <span class="hotel_time_content_bottom_content">周二离店</span>
                         <span class="hotel_time_content_bottom_right">1晚</span>
                    </div>
                </div>

                <div class="hotel_time_content_two" @click="tab3">
                    <div class="hotel_time_content_top_two">
                        <span class="hotel_time_content_top_left">06月17日</span>
                         <span class="hotel_time_content_top_right">周一入住</span>
                    </div>
                </div>
                <div class="hotel_time_right">
                    <img src="../../assets/jiantou.png"/>
                </div>
            </div>
            <div class="hotel_search">
                <div class="hotel_search_left">
                    <P>搜索</P>
                </div>
                <div class="hotel_search_near">
                    <p>我的附近</p>
                </div>
                <div class="hotel_search_antistop">
                    <p>位置/酒店/关键词</p>
                </div>
                <div class="hotel_search_right">
                    <img src="../../assets/jiantou.png"/>
                </div>
            </div>
            <div class="hotel_bottom">
                <button class="submit">查找酒店</button>
            </div>
        </div>
        <div class="hotel_bottom_1">
            <div class="bottom_sbmit">
                <a href="https://i.meituan.com/account/login" class="bottom_submit_1">登录</a>
                <a href="https://i.meituan.com/account/signup" class="bottom_submit_1">注册</a>
            </div>
             <ul class="hotel_bottom_tab">
                <li>
                    <a href="/">首页</a>
                </li>
                 <li>
                    <a href="">订单</a>
                </li>
                 <li>
                    <a href="">客户端</a>
                </li>
                 <li>
                    <a href="https://i.meituan.com/client">电脑版</a>
                </li> 
                <li>
                    <a href="https://i.meituan.com/help/">帮助</a>
                </li>
            </ul>
            <span class="hotel_bottom_tob_span">友情链接：
            <a href="https://maoyan.com/?channel=touch_group">猫眼电影</a>
            </span>
            <div class="hotel_bottom_tab_ip">
                <span class="hotel_bottom_tab_ip_text"> "©2019 代丹阳 "<a href="//www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a> </span>
            </div>
        </div>
 
            <div class="bottom_calender">
                  <button class="surebtn" @click="sure" >完成</button>
                           <div class="content">
    <Calendar
      ref="Calendar"
      :markDateMore="arr"
      :markDate="arr2"
      v-on:isToday="clickToday"
      agoDayHide="1530115221"
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
    ></Calendar>
    
  </div>
</div>
    </div>
</template>
<script>
import Calendar from "vue-calendar-component";
export default {
     data() {
      return {
        monthData: []
      }
  },
    mounted(){
        document.querySelector(".hotel_top_right .hotel_top_bottom").style.display="none"
            document.querySelector(".hotel_time_content_two").style.display="none"
               document.querySelector(".bottom_calender").style.display="none"
    },
    methods:{
        tab1(){
            document.querySelector(".hotel_top_left .hotel_top_bottom").style.display="block"
            document.querySelector(".hotel_top_right .hotel_top_bottom").style.display="none"
            document.querySelector(".hotel_time_content").style.display="block"
            document.querySelector(".hotel_time_content_two").style.display="none"
            
        }, 
        tab2(){
            document.querySelector(".hotel_top_left .hotel_top_bottom").style.display="none"
            document.querySelector(".hotel_top_right .hotel_top_bottom").style.display="block"
            document.querySelector(".hotel_time_content").style.display="none"
            document.querySelector(".hotel_time_content_two").style.display="block"
        },
        tab3(){
            document.querySelector(".bottom_calender").style.display="block"
        },
        sure(){
            document.querySelector(".bottom_calender").style.display="none"
        },
    //     changeMonth (start, end, current) {
    // //    console.log('changeMonth', start.format(), end.format(), current.format())
    //   },
      // 点击事件
      eventClick (event, jsEvent, pos) {
        console.log('eventClick', event, jsEvent, pos)
      },
      // 点击当天
      dayClick (day, jsEvent) {
         console.log('dayClick', day, jsEvent)
      },
      // 查看更多
      moreClick (day, events, jsEvent) {
        console.log('moreCLick', day, events, jsEvent)
      },
    },
  components: {
    Calendar
  },


}
</script>

<style scoped>
*{
  border: 0;
  margin: 0;
  padding: 0;
}
html{
  font-size: 50px;
  height: 100%;
 overflow: auto;
  }
body{
  background: #DCDCDC;  
  height: 100%;
  overflow: auto;
  position: relative;
  }
a{
    text-decoration: none;
    color: #06c1ae;
}
.heard_image{
    width: 100%;
}
.calendar{
    z-index: 500px;
}
.heard_image img{
    position:relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    z-index: -1;
}
.hotel{
    position: relative;
    height: 6rem;
    background: #fff;
    border-top-left-radius: .06rem;
    border-top-right-radius: .06rem;
    margin: -1.1rem .2rem 0;
    border: 1px solid #f3f3f3;
    border-radius: .1rem;
}
.hotel_top{
    border-bottom: 1px solid #f3f3f3;
    width: 100%;
    height: 1.1rem;
}
.hotel_top_left{
    height: 1rem;
    width: 45%;
    float: left;
    line-height: 1rem;
    padding-left: .3rem;
    font-size: .4rem;
    border-right: 0.01rem solid #999;
}

.hotel_top_bottom{
    display: block;
    position: absolute;
    border-radius: .06rem;
    height: .1rem;
    width: 45%;
    background-color: #06c1ae;
    transform: translateZ(0);
    transition: transform .3s;
}
.hotel_top_right{
    height: 1rem;
    width: 45%;
    float: left;
    line-height: 1rem;
    padding-right: .3rem;
    font-size: .4rem;  
}
.hotel_top_right_bottom{
    display: block;
    position: absolute;
    border-radius: .06rem;
    height: .1rem;
    width: 45%;
    background-color: #06c1ae;
    transform: translateZ(0);
    transition: transform .3s 
}

.hotel_site{
    margin: 0 .24rem;
    height: 1.1rem;
    line-height: 1.1rem;
    display: flex;
    font-size: .34rem;
    color: #333;
    border-bottom: 1px solid #f3f3f3;
}
.hotel_site_left{
    width: 20%;
    font-size: .3rem
}
.hotel_site_left p{
    display: block;
    width: 1rem;
    margin-right: .16rem;
    font-size: .3rem;
    color: #999;
}
.hotel_site_city{
     width: 100%;
     height: 100%;
    font-size: .3rem
}
.hotel_site_city p{
    display: block;
    width: 1rem;
    margin-right: .16rem;
    font-size: .34rem;
}
.hotel_site_right{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.hotel_site_right img{
    width: 30%;
    height: 40%;
}
.hotel_time{
    margin: 0 .24rem;
    height: 1.5rem;
    line-height: 1.1rem;
    display: flex;
    font-size: .34rem;
    color: #333;
    border-bottom: 1px solid #f3f3f3;
}
.hotel_time_left{
    width: 20%;
    height: 100%;
    font-size: .3rem
}
.hotel_time_left p{
    display: block;
    width: 1rem;
    height: 1.5rem;
    margin-right: .16rem;
    font-size: .3rem;
    color: #999;
    line-height: 1.5rem;
}
.hotel_time_content{
    width: 100%;
    height: 100%;
    font-size: .34rem;
}
.hotel_time_content_two{
     width: 100%;
    height: 100%;
    font-size: .34rem;
}
.hotel_time_content_top{
    width: 100%;
    height: 50%;
}
.hotel_time_content_top_two{
    width: 100%;
    height: 100%;
    line-height: 1.5rem;
}
.hotel_time_content_top_left{
    float: left;
    height: 100%;
    font-size: .35rem;
    color: #000;
}
.hotel_time_content_top_right{
    font-size: .24rem;
    color: #999;
    margin-right: 1.2rem;
}
.hotel_time_content_bottom{
    width: 100%;
    height: 50%;
    line-height: 100%;
}
.hotel_time_content_bottom_left{
     float: left;
    height: 100%;
    font-size:.35rem;
    color: #000;
}
.hotel_time_content_bottom_content{
    font-size: .24rem;
    color: #999;
    height: 100%;
    margin-right: .2rem;
}
.hotel_time_content_bottom_right{
    font-size: .24rem;
    color: #999;
    height: 100%;
    margin-right: .6rem;
}
.hotel_time_right{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.hotel_time_right img{
    width: 30%;
    height: 30%;
}


.hotel_search{
    margin: 0 .24rem;
    height: 1.1rem;
    line-height: 1.1rem;
    display: flex;
    font-size: .34rem;
    color: #333;
    border-bottom: 1px solid #f3f3f3;
}
.hotel_search_left{
    width: 20%;
    font-size: .3rem
}
.hotel_search_left p{
    display: block;
    width: 1rem;
    margin-right: .16rem;
    font-size: .3rem;
    color: #999;
}
.hotel_search_near{
     width: 25%;
     height: 100%;
}
.hotel_search_near p{
    display: block;
    margin-right: .16rem;
    font-size: .35rem;
    color: #333;
}
.hotel_search_antistop{
    width:35%;
    height: 100%;
}
.hotel_search_antistop p{
    font-size: .24rem;
    color: #999;
    float: left;
}
.hotel_search_right{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.hotel_search_right img{
    width: 30%;
    height: 40%;
}
.hotel_bottom{
    padding: .16rem .24rem;
}
.submit{
    background: #2bb2a3;
    border-color: #2bb2a3;
    color: #fff;
    display: block;
    width: 100%;
    height: .8rem;
    line-height: .8rem;
    border-radius: .06rem;
    border: 1px solid #ddd8ce;
    font-size: .34rem;
}
.hotel_bottom_1{
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: .24rem;
}
.bottom_sbmit{
    margin-bottom: .4rem;
}
.bottom_submit_1{
    border: 1px solid #2bb2a3;
    color: #2bb2a3;
    display: block;
    float: left;
    margin-left: .1rem;
    margin-bottom: .2rem;
    width: 1.32rem;
    height: .52rem;
    line-height: .52rem;
    border-radius: .06rem;
    text-decoration:none
}
.hotel_bottom_tab{
    width: 100%;
    display: flex;
    margin: .24rem 0;
}
.hotel_bottom_tab li{
    display: block;
    flex: 1;
    text-align: center;
    border-right: 1px solid #e5e5e5;
}
.hotel_bottom_tob_span{
    display: block;
    width: 100%;
    text-align: center;
    margin: .24rem 0;
}
.hotel_bottom_tab_ip{
    display: block;
    text-align: center;
    margin: .24rem 0;
    position: relative;
}
.hotel_bottom_tab_ip_text{
    background: #f0efed;
    display: inline-block;
    padding: 0 .3rem;
    color: #999;
}
.surebtn{
    color: #f9504c;
    font-size: .3rem;
    text-decoration: none;
    padding: .1rem .2rem;
    border: .02rem solid #f9504c;
    border-radius: .06rem;
    position: absolute;
    right: 0.1rem;
    top: -0.8rem;
    height: 0.7rem;
    background: #FFF
}
.bottom_calender{
    width: 100%;
    height: 5rem;
    position:absolute;
    bottom: 1rem;
    background:#0fc37c; 
}
h3 {
  text-align: center;
  width: 90%;
  margin: auto;
}
.div {
  margin: auto;
  width: 220px;
  height: 44px;
  line-height: 44px;
  background: #00CD66;
  color: #fff;
  font-size: 17px;
  text-align: center;
  margin-top: 20px;
}
.wh_container >>> .mark1 {
  background-color: orange;
}
.wh_container >>> .mark2 {
  background-color: blue;
}
.wh_content_item > .wh_isMark {
  background: orange;
}
.wh_container >>> .wh_content_all {
  /* background-color: red; */
}
</style>